<template>
  <div class="image-uploader">
    <input 
      type="file" 
      multiple 
      accept="image/*" 
      @change="handleFileChange"
      class="file-input"
      id="file-upload"
    />
    <label for="file-upload" class="upload-button">
      <div class="plus-icon">+</div>
    </label>
    <div class="image-list">
      <div 
        v-for="(image, index) in images" 
        :key="index"
        class="image-item"
        draggable
        @dragstart="dragStart(index)"
        @dragover.prevent="dragOver(index)"
        @drop="drop()"
      >
        <img :src="image" class="preview-image" />
        <div class="image-overlay">
          <button @click="removeImage(index)" class="remove-btn">×</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'

type Image = string

const props = defineProps({
  modelValue: {
    type: Array as () => Image[],
    required: true
  },
  size: {
    type: Number,
    default: 120
  }
})

const emit = defineEmits(['update:modelValue'])

const images = ref<string[]>(props.modelValue)
const draggedIndex = ref<number | null>(null)

watch(images, (newValue) => {
  emit('update:modelValue', newValue)
}, { deep: true })

const handleFileChange = (e: Event) => {
  const target = e.target as HTMLInputElement
  const files = Array.from(target.files || [])
  
  files.forEach(file => {
    if (!file.type.match('image.*')) return
    
    const reader = new FileReader()
    reader.onload = (e) => {
      images.value.push(e.target?.result as string)
    }
    reader.readAsDataURL(file)
  })
  target.value = ''
}

const removeImage = (index: number) => {
  images.value.splice(index, 1)
}

const dragStart = (index: number) => {
  draggedIndex.value = index
}

const dragOver = (index: number) => {
  if (draggedIndex.value === null || draggedIndex.value === index) return
  
  console.log('Dragging from', draggedIndex.value, 'to', index)
  const draggedItem = images.value[draggedIndex.value]
  const newImages = [...images.value]
  newImages.splice(draggedIndex.value, 1)
  newImages.splice(index, 0, draggedItem)
  images.value = newImages
  draggedIndex.value = index
  console.log('New order:', images.value)
}

const drop = () => {
  draggedIndex.value = null
}
</script>

<style scoped>
.image-uploader {
  max-width: 800px;
  margin: 0 auto;
  padding: 16px;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  border: 1px solid #d1d5db;
}

.file-input {
  display: none;
}

.upload-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: v-bind(size + 'px');
  height: v-bind(size + 'px');
  padding: 0;
  border: 2px dashed #d1d5db;
  background-color: #f9fafb;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.3s;
  box-sizing: border-box;
}

.upload-button:hover {
  border-color: #4f46e5;
}

.plus-icon {
  font-size: 36px;
  line-height: normal;
  font-weight: lighter;
  color: #c2c4c8;
}

.file-input-label {
  display: inline-block;
  margin-bottom: 24px;
  padding: 12px 24px;
  background: #4f46e5;
  color: white;

  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s;
}

.file-input-label:hover {
  background: #4338ca;
}

.image-list {
  display: flex;
  flex-direction: column;
  width: v-bind(size + 'px');
}

.image-item {
  position: relative;
  width: v-bind(size + 'px');
  height: v-bind(size + 'px');
  z-index: 2;
}

.preview-image {
  width: v-bind(size + 'px');
  height: v-bind(size + 'px');
  object-fit: cover;
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: all 0.3s;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  z-index: 1;
  pointer-events: none;
}

.image-item:hover .image-overlay {
  opacity: 1;
}

.remove-btn {
  background: transparent;
  color: white;
  border: none;
  width: 24px;
  height: 24px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  line-height: 24px;
  text-align: center;
  opacity: 1;
  transition: all 0.2s;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  pointer-events: auto;
  outline: none;
  user-select: none;
  z-index: 3;
}

.remove-btn:hover {
  transform: scale(1.1);
}

.image-item:hover .remove-btn {
  opacity: 1;
}
</style>